<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="Generator" content="Asbru Web Content Editor">
<meta http-equiv="Copyright" content="(C) 2002-2006 - Asbru Ltd. - www.asbrusoft.com">
<title>Asbru Web Content Editor with basic hyperlink and media dialog windows example</title>
<link id="skin_css" href="/hardcore/webeditor/webeditor.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="/hardcore/webeditor/webeditor.js"></script>
<script type="text/javascript">
<!--
// This example web page and its content images are located in the same folder as the web content editor program files so image URLs etc. should not be "shortened"
webeditor.shortenLocalURLsSearch = false;
webeditor.shortenLocalURLsPath = false;
webeditor.shortenLocalURLsBase = false;
// -->
</script>
<script type="text/javascript">
<!--

function webeditor_custom_save() {
	alert('The content is posted to your web server as ordinary HTML FORM data.\r\nSimply replace your TEXTAREA fields with the Asbru Web Content Editor.\r\nNo changes to your server-side programming required.\r\n\r\n\r\nAlternatively, Javascript can be used to get the content - i.e for a preview.');
	preview_window = window.open("", "preview_window", ",width=850,height=600,resizable=yes,status=yes,titlebar=yes,scrollbars=yes,menubar=no,location=no,toolbar=no", true);
	preview_window.focus();
	// Safari may not display content correctly if written directly to the preview window
	if (typeof(contenteditable_preview_fix) == "function") {
		contenteditable_preview_fix(preview_window, '', '', HardCoreWebEditorGetContent());
		return;
	}
	preview_window.document.write('<html><head><title>Preview<\/title><link rel="stylesheet" type="text/css" href="/hardcore/webeditor/hardcore.css"><\/head><body>' + HardCoreWebEditorGetContent() + '<\/body><\/html>');
	preview_window.document.close();
}

function offsetTop(node) {
	//if (node.nodeName == "#text") node = node.parentNode;
	var top = node.offsetTop;
	while (node = node.offsetParent) {
		top += parseInt(node.offsetTop);
	}
	return top;
}

function offsetLeft(node) {
	var left = node.offsetLeft;
	while (node = node.offsetParent) {
		left += parseInt(node.offsetLeft);
	}
	return left;
}

function doResize() {
	if (document.getElementById) {
		var bottomMargin = 75;
		var minHeight = 300;
		var minWidth = 600;
		var innerNode = document.getElementById("inner");
		var innerTop = offsetTop(innerNode);
		var innerLeft = offsetLeft(innerNode);
		var innerHeight = innerNode.offsetHeight;
		var innerWidth = innerNode.offsetWidth;
	
		var windowHeight;
		var windowWidth;
		if (self.innerHeight) {
			// all except Explorer
			windowWidth = self.innerWidth;
			windowHeight = self.innerHeight;
		} else if (document.documentElement && document.documentElement.clientHeight) {
			// Explorer 6 Strict Mode
			windowWidth = document.documentElement.clientWidth;
			windowHeight = document.documentElement.clientHeight;
		} else if (document.body) {
			// other Explorers
			windowWidth = document.body.clientWidth;
			windowHeight = document.body.clientHeight;
		}
	
		var height = windowHeight-innerTop-bottomMargin;
		var width = windowWidth-innerLeft;
	
		if (height<minHeight) {
			height = minHeight;
		}
		height = height + "px";
		if (width<minWidth) {
			width = minWidth;
		}
		width = width + "px";
	
		var innernode = document.getElementById("inner");
		if ((innernode.style.height != height) || (innernode.style.width != width)) {
			innernode.style.height = height;
			innernode.style.width = width;
			setTimeout(doResize, 1);
		}
	}
}

window.onresize = doResize;

// -->
</script>
</head>
<body onload="doResize();">
<h3>Asbru Web Content Editor with basic hyperlink and media dialog windows example</h3>
<table><tr><td>
<b>Fully Customisable:</b><br>
<ul>
<li>Rearrange, remove and add your own toolbar buttons and options</li>
<li>Automatic or fixed size web content editor input field(s)</li>
<li>Any number of web content editors and toolbars per web page/form</li>
<li>Javascript API for integration and for adding your own functionality</li>
<li>Select between a number of different skins or create your own skin</li>
</ul>
</td><td>&nbsp;</td><td>
<b>System Requirements:</b><br>
<ul>
<li>Microsoft Internet Explorer (v4.0 or newer) on Windows</li>
<li>Mozilla (v1.3 or newer) on Linux, Macintosh, Unix and Windows</li>
<li>Mozilla Firefox (v0.7 or newer) on Linux, Macintosh, Unix and Windows</li>
<li>Netscape (v7.1 or newer) on Linux, Macintosh, Unix and Windows</li>
<li>Safari (v2.0.1 or newer) on Macintosh</li>
</ul>
</td></tr></table>
<div><br></div>
<form method="post" action="" onsubmit="webeditor_custom_save();">
<table border="0" width="100%">
<tr>
<td>
<input type="button" value="Post &amp; Preview" onclick="webeditor_custom_save();">
</td>
<td align="right">
<b>Web content editor toolbar skin:</b>
<select name="skin" onchange="document.getElementById('skin_css').href = this.value">
<option value="/hardcore/webeditor/webeditor.css">- default -</option>
<option value="/hardcore/webeditor/webeditor.classic.css">Classic</option>
<option value="/hardcore/webeditor/webeditor.blue.css">Blue</option>
<option value="/hardcore/webeditor/webeditor.green.css">Green</option>
<option value="/hardcore/webeditor/webeditor.olive.css">Olive</option>
<option value="/hardcore/webeditor/webeditor.red.css">Red</option>
<option value="/hardcore/webeditor/webeditor.white.css">White</option>
<option value="/hardcore/webeditor/webeditor.yellow.css">Yellow</option>
</select>
</td>
</tr>
</table>
<div><br></div>
<table cellpadding="0" cellspacing="0" style="width: 100%; border: 1px solid black;">
<tr><td style="width: 100%;">
<script type="text/javascript">
<!--
HardCoreWebEditorToolbar();
// -->
</script>
</td></tr>
<tr><td id="inner" style="width: 100%; height: 300px;">
<script type="text/javascript">
<!--
content = '';
content_editor = new HardCoreWebEditor('/hardcore/webeditor/', '', 'content', content, '', '/hardcore/webeditor/hardcore.css', true, '', '', '', '', '', '', '', '', 'html', '');
// -->
</script>
</td></tr>
<tr><td style="width: 100%;">
<script type="text/javascript">
<!--
HardCoreWebEditorDOMInspector('content');
// -->
</script>
</td></tr>
</table>
</form>
</body>
</html>
